<template>
  <div class="edit">
    <div class="baseInfo">基础信息</div>
    <div class="box">
      <div class="swiper">轮播图</div>
      <el-upload
        action="#"
        list-type="picture-card"
        style="margin-left: 30px"
        :auto-upload="false"
      >
        <i slot="default" class="el-icon-plus"></i>
        <div slot="file" slot-scope="{ file }">
          <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
          <span class="el-upload-list__item-actions">
            <span
              class="el-upload-list__item-preview"
              @click="handlePictureCardPreview(file)"
            >
              <i class="el-icon-zoom-in"></i>
            </span>
            <span
              v-if="!disabled"
              class="el-upload-list__item-delete"
              @click="handleDownload(file)"
            >
              <i class="el-icon-download"></i>
            </span>
            <span
              v-if="!disabled"
              class="el-upload-list__item-delete"
              @click="handleRemove(file)"
            >
              <i class="el-icon-delete"></i>
            </span>
          </span>
        </div>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="" />
      </el-dialog>
      <div class="swiper">
        <span>套系金额：</span>
        <el-input
          class="input"
          v-model="price"
          placeholder="请输入内容"
        ></el-input>
      </div>
      <div class="deposit" style="height: 60px; align-items: center">
        <el-switch
          v-model="depositVal"
          active-color="#13ce66"
          inactive-color="#ff4949"
        >
        </el-switch>
        <div style="display: inline-block; padding-left: 10px">
          <span>套系定金：</span
          ><el-input
            class="input"
            v-model="price"
            placeholder="请输入内容"
          ></el-input>
        </div>
      </div>
      <div class="deposit">
        <el-switch
          v-model="depositVal"
          active-color="#13ce66"
          inactive-color="#ff4949"
        ></el-switch>
        <table>
          <div v-for="i in 10" :key="i">
            <tr style="background-color: rgba(238, 238, 238, 1)">
              <td>内景</td>
            </tr>
            <tr>
              <td>6</td>
            </tr>
          </div>
        </table>
      </div>
    </div>
    <div class="commonBox">
      <el-switch
        v-model="depositVal"
        active-color="#13ce66"
        inactive-color="#ff4949"
      ></el-switch>
      <div class="common">拍摄服装</div>
    </div>
    <div class="tag">
      <span class="graySpan"></span>
      <div class="input">
        <el-tag
          :key="tag"
          v-for="(tag, index) in dynamicTags"
          closable
          :disable-transitions="false"
          @close="handleClose(index, 'clothe')"
        >
          <span
            style="
              border-right: 1px solid #dedede;
              padding-right: 3px;
              color: #002500;
            "
            >{{ index + 1 }}号服装</span
          >
          {{ tag }}
        </el-tag>
        <el-select
          ref="saveTagInput"
          @keyup.enter.native="handleInputConfirm('clothe')"
          @change="handleInputConfirm('clothe')"
          v-if="inputVisible"
          v-model="inputValue"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.label"
          >
          </el-option>
        </el-select>
        <el-button
          v-else
          class="button-new-tag"
          size="small"
          @click="showInput('clothe')"
          >+ 服装标签</el-button
        >
      </div>
    </div>
    <div class="commonBox">
      <el-switch
        v-model="depositVal"
        active-color="#13ce66"
        inactive-color="#ff4949"
      ></el-switch>
      <div class="common">外景基地</div>
    </div>
    <div class="tag">
      <span class="graySpan"></span>
      <div class="input">
        <el-tag
          :key="tag"
          v-for="(tag, index) in baseTags"
          closable
          :disable-transitions="false"
          @close="handleClose(index, 'base')"
        >
          <span
            style="
              border-right: 1px solid #dedede;
              padding-right: 3px;
              color: #002500;
            "
            >{{ index + 1 }}号基地</span
          >
          {{ tag }}
        </el-tag>
        <el-select
          ref="saveTagInput"
          @keyup.enter.native="handleInputConfirm('base')"
          @change="handleInputConfirm('base')"
          v-if="baseVisible"
          v-model="inputValue"
          placeholder="请选择"
        >
          <el-option
            v-for="item in baseOptions"
            :key="item.value"
            :label="item.label"
            :value="item.label"
          >
          </el-option>
        </el-select>
        <el-button
          v-else
          class="button-new-tag"
          size="small"
          @click="showInput('base')"
          >+ 基地标签</el-button
        >
      </div>
    </div>
    <div class="commonBox">
      <el-switch
        v-model="depositVal"
        active-color="#13ce66"
        inactive-color="#ff4949"
      ></el-switch>
      <div class="common">拍摄造型</div>
    </div>
    <div class="tag">
      <el-tag
        :key="tag"
        v-for="(tag, index) in styleTags"
        closable
        :disable-transitions="false"
        @close="handleClose(index, 'style')"
      >
        {{ tag }}
      </el-tag>
      <el-input
        class="input-new-tag"
        v-if="styleinputVisible"
        v-model="inputValue"
        ref="saveTagInput"
        size="small"
        @keyup.enter.native="handleInputConfirm('style')"
        @blur="handleInputConfirm('style')"
      >
      </el-input>
      <el-button
        v-else
        class="button-new-tag"
        size="small"
        @click="showInput('style')"
        >+ 新标签</el-button
      >
    </div>
    <div class="commonBox">
      <el-switch
        v-model="depositVal"
        active-color="#13ce66"
        inactive-color="#ff4949"
      ></el-switch>
      <div class="common">选择套系产品</div>     
    </div>
    <div class="box2">
      <div class="left-box">
        <div>
          <el-input
            size="mini"
            placeholder="搜索"
            prefix-icon="el-icon-search"
          ></el-input>
        </div>
        <ul class="list" v-for="i in 3" :key="i">
          <li>
            <div class="subtit">类别A</div>
            <ul class="sublist">
              <el-checkbox-group v-model="checkList">
                <li v-for="i in 5" :key="i">
                  <el-checkbox :label="'选项名称' + i"
                    >选项名称{{ i }}</el-checkbox
                  >
                </li>
              </el-checkbox-group>
            </ul>
          </li>
        </ul>
      </div>
      <div class="right-box">
        <div class="d1">
          <span class="s1">已选{{ checkList.length }}项</span>
          <span class="s2">清空</span>
        </div>
        <ul>
          <li v-for="itme in checkList" :key="itme">{{ itme }}</li>
        </ul>
      </div>
    </div>
    <div class="commonBox">
      <el-switch
        v-model="depositVal"
        active-color="#13ce66"
        inactive-color="#ff4949"
      ></el-switch>
      <div class="common">拍照特色</div>
    </div>
    <div class="intru" v-for="(item, index) in featureList" :key="index">
      <div>
        <el-input
          class="input"
          placeholder="请输入内容"
          v-model="item.feature"
        ></el-input>
      </div>
      <div>
        <el-input
          class="input"
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="item.intrudction"
        >
        </el-input>
        <i class="el-icon-circle-plus-outline" @click="handleAdd('feature')"></i>  

        <i
          class="el-icon-remove-outline"
          v-if="index != 0"
          @click="handleDel(index,'feature')"
        ></i>
      </div>
    </div>
    <div class="commonBox">
      <el-switch
        v-model="depositVal"
        active-color="#13ce66"
        inactive-color="#ff4949"
      ></el-switch>
      <div class="common">场景</div>
    </div>
    <div class="intru" v-for="(item, index) in senceList" :key="index">
      <div>
        <el-input
          class="input"
          placeholder="请输入内容"
          v-model="item.feature"
        ></el-input>
      </div>
      <div>
        <el-input
          class="input"
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="item.intrudction"
        >
        </el-input>
        <i class="el-icon-circle-plus-outline" @click="handleAdd('sence')"></i> 
        <i
          class="el-icon-remove-outline"
          v-if="index != 0"
          @click="handleDel(index,'sence')"
        ></i>
      </div>
    </div>
      <div class="commonBox">
        <el-switch
          v-model="depositVal"
          active-color="#13ce66"
          inactive-color="#ff4949"
        ></el-switch>
        <div class="common">产品</div>
      </div>
      <div class="intru" v-for="(item, index) in proList" :key="index">
        <div>
          <el-input
            class="input"
            placeholder="请输入内容"
            v-model="item.feature"
          ></el-input>
        </div>
        <div>
          <el-input
            class="input"
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="item.intrudction"
          >
          </el-input>
          <i class="el-icon-circle-plus-outline" @click="handleAdd('pro')"></i>  

          <i
            class="el-icon-remove-outline"
            v-if="index != 0"
            @click="handleDel(index,'pro')"
          ></i>
        </div>
      </div>
      <div class="commonBox">
        <el-switch
          v-model="depositVal"
          active-color="#13ce66"
          inactive-color="#ff4949"
        ></el-switch>
        <div class="common">内容介绍</div>
      </div>
      <el-upload
        action="#"
        list-type="picture-card"
        style="margin-left: 30px"
        :auto-upload="false"
      >
        <i slot="default" class="el-icon-plus"></i>
        <div slot="file" slot-scope="{ file }">
          <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
          <span class="el-upload-list__item-actions">
            <span
              class="el-upload-list__item-preview"
              @click="handlePictureCardPreview(file)"
            >
              <i class="el-icon-zoom-in"></i>
            </span>
            <span
              v-if="!disabled"
              class="el-upload-list__item-delete"
              @click="handleDownload(file)"
            >
              <i class="el-icon-download"></i>
            </span>
            <span
              v-if="!disabled"
              class="el-upload-list__item-delete"
              @click="handleRemove(file)"
            >
              <i class="el-icon-delete"></i>
            </span>
          </span>
        </div>
      </el-upload>
      <div class="commonBox">
        <el-switch
          v-model="depositVal"
          active-color="#13ce66"
          inactive-color="#ff4949"
        ></el-switch>
        <div class="common">购买须知</div>
      </div>
      <div class="intru" v-for="(item, index) in noticeList" :key="index">
        <div>
          <el-input
            class="input"
            placeholder="请输入内容"
            v-model="item.feature"
          ></el-input>
        </div>
        <div>
          <el-input
            class="input"
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="item.intrudction"
          >
          </el-input>
          <i class="el-icon-circle-plus-outline" @click="handleAdd('notice')"></i>  

          <i
            class="el-icon-remove-outline"
            v-if="index != 0"
            @click="handleDel(index,'notice')"
          ></i>
        </div>
      </div>
      <div class="btn">
        <el-button type="success">提交</el-button>
      </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      checkList: [],
      depositVal: true,
      clotheVal: "",
      dynamicTags: [],
      baseTags: [],
      styleTags: [],
      inputVisible: false,
      baseVisible: false,
      styleinputVisible: false,
      inputValue: "",
      baseinputValue: "",
      price:'',
      featureList: [{ feature: "", intrudction: "" }],
      senceList: [{ feature: "", intrudction: "" }],
      proList: [{ feature: "", intrudction: "" }],
      noticeList: [{ feature: "", intrudction: "" }],

      options: [
        {
          value: "1",
          label: "主纱",
        },
        {
          value: "2",
          label: "副纱",
        },
        {
          value: "3",
          label: "秀禾",
        },
        {
          value: "4",
          label: "旗袍",
        },
      ],
      baseOptions: [
        {
          value: "1",
          label: "北京",
        },
        {
          value: "2",
          label: "上海",
        },
        {
          value: "3",
          label: "深圳",
        },
        {
          value: "4",
          label: "广州",
        },
      ],
    };
  },
  methods: {
    handleClose(index, name) {
      if (name == "clothe") {
        this.dynamicTags.splice(index, 1);
      }
      if (name == "base") {
        console.log("ddf", this.baseTags);
        this.baseTags.splice(index, 1);
      }
      if (name == "style") {
        this.styleTags.splice(index, 1);
      }
    },
    showInput(name) {
      if (name == "clothe") {
        this.inputVisible = true;
      }
      if (name == "base") {
        this.baseVisible = true;
      }
      if (name == "style") {
        this.styleinputVisible = true;
      }
    },

    handleInputConfirm(name) {
      let inputValue = this.inputValue;
      if (inputValue) {
        if (name == "clothe") {
          this.dynamicTags.push(inputValue);
          this.inputVisible = false;
        }
        if (name == "base") {
          this.baseTags.push(inputValue);
          this.baseVisible = false;
        }
        if (name == "style") {
          this.styleTags.push(inputValue);
          this.styleinputVisible = false;
        }
      }
      this.inputValue = "";
    },
    handleAdd(name) {
      if(name=='feature'){
        this.featureList.push({ feature: "", intrudction: "" });
      }
      console.log('ggf',name)

      if(name=='sence'){
        console.log('ggf',this.senceList)
        this.senceList.push({ feature: "", intrudction: "" });
      }
      if(name=='pro'){
        this.proList.push({ feature: "", intrudction: "" });
      }
      if(name=='notice'){
        this.noticeList.push({ feature: "", intrudction: "" });
      }
    },
    handleDel(index,name) {
      if(name=='feature'){
        this.featureList.splice(index, 1);
      }
      if(name=='sence'){
        this.senceList.splice(index, 1);
      }
      if(name=='pro'){
        this.proList.splice(index, 1);
      }
      if(name=='notice'){
        this.noticeList.splice(index, 1);
      }
    },
  },
};
</script>

<style scoped lang="less">
/deep/ .el-select {
  padding: 4px;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
/deep/ .el-switch{
  padding-left: 5px;
}
.edit {
  width: 98%;
  margin: 0 auto;
}
.baseInfo {
  margin: 16px 0;
  height: 30px;
  line-height: 30px;
  font-size: 18px;
  font-weight: 500;
  border-left: 2px solid #30c2a3;
  margin-left: 28px;
  padding-left: 8px;
}
.box {
  background-color: #f5f5f5;
}
.input {
  width: 300px;
}
.swiper {
  padding: 10px 50px;
}
table {
  padding-left: 8px;
  display: flex;
  border-collapse: collapse;
  text-align: center;
  padding-bottom: 20px;
}
td {
  border: 1px solid #ccc;
  font-size: 20px;
  padding: 14px 28px;
}
.deposit {
  display: flex;
}
.commonBox {
  display: flex;
  align-items: center;
  height: 50px;
  .common {
    border-left: 2px solid #30c2a3;
    margin-left: 10px;
    padding-left: 8px;
    height: 30px;
    line-height: 30px;
    font-size: 18px;
  }
}
.btn{
  width:400px;
  margin: 0 auto;
  padding:20px;
}
.box2 {
  width: 400px;
  // margin: 0 auto;
  display: flex;
  height: 320px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  .left-box {
    height: 100%;
    overflow-y: auto;
    padding: 8px;
    width: 180px;
    &::-webkit-scrollbar {
      width: 3px;
    }
    &::-webkit-scrollbar-thumb {
      width: 3px;
      background: #999;
      border-radius: 20px;
    }
    .subtit {
      color: #999;
      padding: 5px 0;
    }
    .sublist {
      li {
        margin-bottom: 5px;
      }
    }
  }
  .right-box {
    padding: 15px;
    width: 150px;
    border-left: 1px solid #ccc;
    &::-webkit-scrollbar {
      width: 3px;
    }
    &::-webkit-scrollbar-thumb {
      width: 3px;
      background: #999;
      border-radius: 20px;
    }
    .d1 {
      .s1 {
        color: #999;
      }
      .s2 {
        font-size: 15px;
        // font-weight: bold;
        margin-left: 15px;
      }
    }
    > ul {
      margin-top: 20px;
      li {
        margin-bottom: 10px;
        // font-weight: bold;
      }
    }
  }
}
.intru {
  .input {
    width: 400px;
    margin-top: 16px;
  }
  i {
    font-size: 28px;
    display: inline-block;
    margin: 0 10px;
  }
}
</style>